<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            padding: 20px 80px;
            margin: 100px auto;
            width: 256px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>
            会员信息注册系统
        </h1>
        <form action="">
            <p>
                姓&nbsp;&nbsp;&nbsp; 名： <input type="text" class="userName">
            </p>
            <p>
                手机号： <input type="tel" class="tel">
            </p>
            <p>
                密&nbsp;&nbsp;&nbsp; 码： <input type="password" class="password">
            </p>
            <p>
                性&nbsp;&nbsp;&nbsp; 别： <input type="text" class="sex">
            </p>
            <p>
                年&nbsp;&nbsp;&nbsp; 龄： <input type="number" class="age">
            </p>
            <p>
                <button>立即注册</button>
            </p>
        </form>
    </div>
    <script>
        // ajax: 异步加载，局部刷新
        var btn = document.querySelector("button");
        var tel = document.querySelector(".tel");
        var userName = document.querySelector(".userName");
        var password = document.querySelector(".password");
        var sex = document.querySelector(".sex");
        var age = document.querySelector(".age");


        btn.onclick = function(e) {
            e.preventDefault();

            var userNameVal = userName.value;
            var telVal = tel.value;
            var passwordVal = password.value;
            var sexVal = sex.value;
            var ageVal = age.value;

            var xhr = new XMLHttpRequest();

            xhr.open("get", `./01_insert.php?userName=${userNameVal}&tel=${telVal}&password=${passwordVal}&sex=${sexVal}&age=${ageVal}`, true);

            xhr.send()

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (JSON.parse(xhr.responseText).errCode === 0) {
                        alert("注册成功了，别迷，赶紧去登陆");
                    } else {
                        alert("诶是，注册失败，赶紧重新注册，给爷爬");
                    }
                }
            }
        }
    </script>

</body>

</html>